<cnsl-detail-layout [hasBackButton]="true" title="{{ 'IAM.MEMBER.TITLE' | translate }}">
  <p class="subinfo" sub>
    <span class="cnsl-secondary-text">{{ 'IAM.MEMBER.DESCRIPTION' | translate }}</span>
    <a mat-icon-button href="https://zitadel.com/docs/concepts/structure/managers" target="_blank">
      <mat-icon class="icon">info_outline</mat-icon>
    </a>
  </p>
  <cnsl-members-table
    [dataSource]="dataSource"
    [memberRoleOptions]="memberRoleOptions"
    (updateRoles)="updateRoles($event.member, $event.change)"
    [factoryLoadFunc]="changePageFactory"
    (changedSelection)="selection = $event"
    [refreshTrigger]="changePage"
    [canWrite]="['iam.member.write$'] | hasRole | async"
    [canDelete]="['iam.member.delete$'] | hasRole | async"
    (deleteMember)="removeMember($event)"
  >
    <ng-template cnslHasRole selectactions [hasRole]="['iam.member.delete']">
      <button
        color="warn"
        (click)="removeMemberSelection()"
        matTooltip="{{ 'ORG_DETAIL.TABLE.DELETE' | translate }}"
        mat-raised-button
      >
        <i class="las la-trash"></i>
        <span>{{ 'ACTIONS.SELECTIONDELETE' | translate }}</span>
        <cnsl-action-keys [type]="ActionKeysType.DELETE" (actionTriggered)="removeMemberSelection()"> </cnsl-action-keys>
      </button>
    </ng-template>
    <ng-template cnslHasRole writeactions [hasRole]="['iam.member.write']">
      <button color="primary" (click)="openAddMember()" mat-raised-button>
        <div class="cnsl-action-button">
          <mat-icon class="icon">add</mat-icon>
          <span>{{ 'ACTIONS.NEW' | translate }}</span>
          <cnsl-action-keys (actionTriggered)="openAddMember()"> </cnsl-action-keys>
        </div>
      </button>
    </ng-template>
  </cnsl-members-table>
</cnsl-detail-layout>
